﻿<Page x:Class="App61.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
      xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:App61"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <ListView Width="300"
                  HorizontalAlignment="Center"
                  SelectionMode="None"
                  VerticalAlignment="Stretch">
            <ListView.Header>
                <Border BorderBrush="White" BorderThickness="0,0,0,1" Padding="10">
                    <TextBlock Text="My Record List" Style="{StaticResource TitleTextBlockStyle}" />
                </Border>
            </ListView.Header>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Button x:Name="showButton"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    HorizontalAlignment="Stretch"
                                    Content="Show detail">
                                <Interactivity:Interaction.Behaviors>
                                    <Core:EventTriggerBehavior EventName="Click">
                                        <Core:ChangePropertyAction PropertyName="Visibility" TargetObject="{Binding ElementName=grid}" Value="Visible" />
                                        <Core:ChangePropertyAction PropertyName="IsEnabled" TargetObject="{Binding ElementName=showButton}" Value="False" />
                                        <Core:ChangePropertyAction PropertyName="IsEnabled" TargetObject="{Binding ElementName=hideButton}" Value="True" />
                                    </Core:EventTriggerBehavior>
                                </Interactivity:Interaction.Behaviors>
                            </Button>
                            <Button x:Name="hideButton"
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    HorizontalAlignment="Stretch"
                                    Content="Hide detail"
                                    IsEnabled="False">
                                <Interactivity:Interaction.Behaviors>
                                    <Core:EventTriggerBehavior EventName="Click">
                                        <Core:ChangePropertyAction PropertyName="Visibility" TargetObject="{Binding ElementName=grid}" Value="Collapsed" />
                                        <Core:ChangePropertyAction PropertyName="IsEnabled" TargetObject="{Binding ElementName=showButton}" Value="True" />
                                        <Core:ChangePropertyAction PropertyName="IsEnabled" TargetObject="{Binding ElementName=hideButton}" Value="False" />
                                    </Core:EventTriggerBehavior>
                                </Interactivity:Interaction.Behaviors>
                            </Button>
                            <Grid x:Name="grid"
                                  Grid.Row="1"
                                  Grid.ColumnSpan="2"
                                  Height="100"
                                  Visibility="Collapsed">
                                <Grid.Background>
                                    <SolidColorBrush Color="{Binding}" />
                                </Grid.Background>
                                <TextBlock Foreground="White" Text="Record details"
                                           VerticalAlignment="Center" HorizontalAlignment="Center" />
                            </Grid>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
            <Color>Navy</Color>
            <Color>Maroon</Color>
            <Color>Orange</Color>
            <Color>Silver</Color>
            <Color>DarkGreen</Color>
            <Color>SteelBlue</Color>
            <Color>DarkOrange</Color>
            <Color>DimGray</Color>
            <Color>PowderBlue</Color>
            <Color>Pink</Color>
            <Color>Goldenrod</Color>
        </ListView>

    </Grid>
</Page>
